import Cascader from "../../packages/cascader";

describe("Cascader", () => {
  it('单选模式-选择节点', () => {
    const onChangeSpy = cy.spy().as("onChangeSpy");
    cy.mount(Cascader, {
      propsData: {
        options: [
          {
            value: 17,
            label: "西北",
            children: [
              {
                value: 18,
                label: "陕西",
                children: [
                  { value: 19, label: "西安" },
                  { value: 20, label: "延安" },
                ],
              },
              {
                value: 21,
                label: "新疆维吾尔族自治区",
                children: [
                  { value: 22, label: "乌鲁木齐" },
                  { value: 23, label: "克拉玛依" },
                ],
              },
            ],
          },
        ],
      },
      listeners: { change: onChangeSpy }
    });
    cy.get('.z-cascader').click()
    cy.get('.z-cascader-node__label').contains('西北').click()
    cy.get('.z-cascader-node__label').contains('陕西').click()
    cy.get('.z-cascader-node__label').contains('西安').click()

    cy.get('@onChangeSpy').should("have.been.calledWith", [17, 18, 19])
  })

  it('多选模式下-没有子类时，点击checkbox也能选中', () => {
    const onChangeSpy = cy.spy().as("onChangeSpy");
    cy.mount(Cascader, {
      propsData: {
        props: { multiple: true,hideWhenNoChild: true },
        options: [
          {
            value: 1,
            label: "东南",
            children: [],
          },
          {
            value: 17,
            label: "西北",
            children: [
              {
                value: 18,
                label: "陕西",
                children: [
                  { value: 19, label: "西安" },
                  { value: 20, label: "延安" },
                ],
              },
              {
                value: 21,
                label: "新疆维吾尔族自治区",
                children: [
                  { value: 22, label: "乌鲁木齐" },
                  { value: 23, label: "克拉玛依" },
                ],
              },
            ],
          },
        ],
      },
      listeners: { change: onChangeSpy }
    });

    cy.get('.z-cascader').click()
    cy.get('.z-cascader-node__label').contains('东南').parent().find('.z-checkbox__input').click()
    
    cy.get('@onChangeSpy').should("have.been.calledWith", [[1]])
  })
  
  it("多选模式-没有子类时，点名称选中checkbox", () => {
    const onChangeSpy = cy.spy().as("onChangeSpy");
    cy.mount(Cascader, {
      propsData: {
        props: { multiple: true,hideWhenNoChild: true },
        options: [
          {
            value: 1,
            label: "东南",
            children: [],
          },
          {
            value: 17,
            label: "西北",
            children: [
              {
                value: 18,
                label: "陕西",
                children: [
                  { value: 19, label: "西安" },
                  { value: 20, label: "延安" },
                ],
              },
              {
                value: 21,
                label: "新疆维吾尔族自治区",
                children: [
                  { value: 22, label: "乌鲁木齐" },
                  { value: 23, label: "克拉玛依" },
                ],
              },
            ],
          },
        ],
      },
      listeners: { change: onChangeSpy }
    });
    cy.get(".z-cascader").click();
    cy.get(".z-cascader-node__label")
      .contains("东南")
      .click();

    cy.get("li.z-cascader-node")
      .eq(1)
      .get("label.is-checked")
      .should("exist");
    cy.get("@onChangeSpy").should("have.been.calledWith", [[1]]);
  });
});
